<template>
  <swiper
    style="overflow: hidden; position: relative"
    :style="innerStyle"
    indicator-color="rgba(255,255,255,0.5)"
    indicator-active-color="#fff"
    :circular="true"
    autoplay="true"
    interval="2000"
    duration="500"
    :vertical="vertical"
    :indicator-dots="indicatorDots"
    @change="change"
  >
    <swiper-item v-for="item in list" :key="item">
      <image
        @click="click(item)"
        style="width: 100%; height: 100%"
        :src="_.get(item, urlKeyPath)"
        mode="scaleToFill"
      />
    </swiper-item>
  </swiper>
</template>
<script>
export default {
  name: "my-swiper",
  props: {
    /**
     * 数据列表
     */
    list: {
      type: Array,
      require: true,
    },
    /**
     * 如果传入的 list 是对象数组，这个用来确定从每一项的哪个属性上取 url，
     * 如果 list 直接是 url 字符串数组则不用传递这个值
     */
    urlKeyPath: {
      type: String,
    },
    /**
     * 组件最外部样式
     * @example
     * style="
     *    width: 690rpx;
     *    height: 190rpx;
     *    margin-left: 24rpx;
     *    margin-top: 24rpx;
     *    border-radius: 20rpx;
     *    overflow: hidden;
     * "
     */
    innerStyle: {
      type: String,
    },
    /**
     * 是否为纵向
     */
    vertical: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否显示指示器
     */
    indicatorDots: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    /**
     * 轮播项点击事件
     * @param {Object} event 点击项数据
     */
    click(event) {
      this.$emit("click", event);
    },
    change(event) {
      this.$emit("change", event);
    },
  },
};
</script>
